import { Channel } from "@/types";

type ChannelItemProps = {
    channel: Channel;
    onActive: (id: string) => void;
    light: boolean | undefined;
};

const ChannelItem = ({ channel, onActive, light }: ChannelItemProps) => {
    return (
        <div
            onClick={() => onActive(channel.id)}
            className={`rounded-full w-11 h-11 flex justify-center items-center text-sm mr-3.5 shrink-0 overflow-hidden box-content ${
                light ? "bg-white text-black" : "bg-black text-white"
            } ${
                channel.active
                    ? light
                        ? "bg-black! text-white! border-[0]!"
                        : "border-[2px] border-blue-400"
                    : ""
            }`}
        >
            {channel.title}
        </div>
    );
};

export default ChannelItem;
